<template>
    <transition>
      <div v-show="isFoodShow" class="food" ref='wrapper'>
        <div>
          <div class="commodity-img-wrapper">
            <span class="icon-arrow_lift" @click="hide"></span>
            <img class="food-img" :src="food.image">
          </div>
          <div class="food-info">
            <h1 class="food-title">{{food.name}}</h1>
            <span class="item-sell-count">月售{{food.sellCount}}碗</span>
            <span class="item-sell-comment">好评率{{food.rating}}%</span>
            <div class="item-price-wrapper">
              <span class="item-price-now">￥{{food.price}}</span>
              <span class="item-price-old">￥{{food.oldPrice}}</span>
              <div class="addToShopCar" @click="toCar">
                加入购物车
              </div>
              <transition
              name="fade"
              @before-enter="beforeEnter"
              @enter="enter"
              @after-enter="afterEnter"
              >
                <div class="ball" v-show="ballFlag" ref='ball'></div>
              </transition>
            </div>
          </div>
          <div class="color-wall"></div>
          <div class="food-introduce">
            <h2 class="food-introduce-title">商品介绍</h2>
            <p class="food-introduce-content">{{food.info}}</p>
          </div>
          <div class="color-wall"></div>
          <div class="food-comment">
            <h2 class="food-comment-title">商品评价</h2>
            <div class="btn-wrapper">
              <div
              class="btn-item all"
              @click="changeCommentTypeAll"
              :class="{on:commentType == 'all'}"
              >全部<span class="click-count">{{all}}</span></div>
              <div
              class="btn-item recommend"
              :class="{on:commentType == 'recommend'}"
              @click="changeCommentTypeRecommend"
              >推荐<span class="click-count">{{recommend}}</span></div>
              <div
              class="btn-item taunt"
              :class="{on:commentType == 'taunt'}"
              @click="changeCommentTypeTaunt"
              >吐槽<span class="click-count">{{taunt}}</span></div>
            </div>
            <div class="select-comment-wrapper" @click="showOnly">
              <span class="comment-select-icon icon-check_circle" :class='{on:cur}'></span>
              <p class="select-comment">只看有内容的评价</p>
            </div>
          </div>
          <div class="comment-wrapper">
            <div class="comment-item" v-for="(item,index) in filterComments" :key="index">
              <div class="comment-haed">
                <div>
                  <span class="comment-time">{{item.rateTime | formatTime}}</span>
                </div>
                <div class="comment-user">
                  <span class="user">{{item.username}}</span>
                  <span class="user-avatar"><img :src="item.avatar"></span>
                </div>
              </div>
              <div class="comment-content-wrapper">
                <span :class="{'icon-thumb_up': item.rateType == 0,'icon-thumb_down': item.rateType == 1}"></span>
                <p class="comment-content">{{item.text}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'commodityinfo',
  props: ['food'],
  data () {
    return {
      isFoodShow: false,
      cur: false,
      commentType: 'all',
      ballFlag: false
    }
  },
  methods: {
    toCar () {
      this.food.count++
      this.$store.commit('addFoods', this.food)
      this.ballFlag = true
    },
    show () {
      this.isFoodShow = true
    },
    hide () {
      this.isFoodShow = false
    },
    showOnly () {
      if (!this.cur) {
        this.cur = true
      } else {
        this.cur = false
      }
    },
    changeCommentTypeAll () {
      this.commentType = 'all'
    },
    changeCommentTypeRecommend () {
      this.commentType = 'recommend'
    },
    changeCommentTypeTaunt () {
      this.commentType = 'taunt'
    },
    beforeEnter (el) {
      el.style.transform = 'translate(0,0)'
      el.style.opacity = 0
    },
    enter (el, done) {
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      const badgePosition = document.getElementById('car').getBoundingClientRect()
      if (badgePosition.left === 0) {
        const xDis = 42 - ballPosition.left
        const yDis = 680 - ballPosition.top
        // el.offsetHeight()
        el.style.transform = `translate(${xDis}px,${yDis}px)`
        el.style.opacity = 1
        el.style.transition = 'all 0.8s cubic-bezier(.14,.72,.83,.67)'
      } else {
        const xDis = badgePosition.left - ballPosition.left
        const yDis = badgePosition.top - ballPosition.top
        // el.offsetHeight
        el.style.opacity = 1
        el.style.transform = `translate(${xDis}px,${yDis}px)`
        el.style.transition = 'all 0.8s cubic-bezier(.14,.72,.83,.67)'
      }
      done()
    },
    afterEnter (el) {
      this.ballFlag = false
    }
  },
  computed: {
    all () {
      if (this.food) {
        return this.food.ratings.length
      }
    },
    recommend () {
      if (this.food) {
        return this.food.ratings.filter(item => item.rateType === 0).length
      }
    },
    taunt () {
      if (this.food) {
        return this.food.ratings.filter(item => item.rateType === 1).length
      }
    },
    filterComments () {
      switch (this.commentType) {
        case 'recommend':
          if (this.food && this.cur) {
            return this.food.ratings.filter(item => item.rateType === 0).filter(item => item.text !== '')
          } else {
            return this.food.ratings.filter(item => item.rateType === 0)
          }
        case 'taunt':
          if (this.food && this.cur) {
            return this.food.ratings.filter(item => item.rateType === 1).filter(item => item.text !== '')
          } else {
            return this.food.ratings.filter(item => item.rateType === 1)
          }
        default:
          if (this.food && this.cur) {
            return this.food.ratings.filter(item => item.text !== '')
          } else {
            return this.food.ratings
          }
      }
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true
    })
  },
  filters: {
    formatTime (timestamp) {
      const date = new Date(timestamp)
      var y = date.getFullYear() // getFullYear方法以四位数字返回年份
      var M = date.getMonth() + 1 // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
      var d = date.getDate() // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
      var h = date.getHours() // getHours方法返回 Date 对象的小时 (0 ~ 23)
      var m = date.getMinutes() // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
      var s = date.getSeconds() // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
      return y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  }
}
</script>

<style lang="stylus" scoped>
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateX(100%);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.8s ease;
}

.food{
  position fixed
  top 0
  bottom .96rem
  left 0
  right 0
  z-index 30
  background #fff
  .commodity-img-wrapper{
      width 100%
      height 7.5rem
      overflow hidden
      .icon-arrow_lift{
        font-size .32rem
        color #fff
        position absolute
        top .3rem
        left .3rem
      }
      .icon-arrow_lift:before{
        content '\e901'
      }
      .food-img{
          width 100%
      }
  }
  .food-info{
    padding .36rem
    position relative
    .food-title{
      font-size .28rem
      font-weight 700
      color rgb(7,17,27)
      margin-bottom .16rem
    }
    .item-sell-count{
        font-size .2rem
        color rgb(147,153,159)
        line-height .2rem
    }
    .item-sell-comment{
        font-size .2rem
        color rgb(147,153,159)
        line-height .2rem
        margin-left .24rem
    }
    .item-price-wrapper{
      margin-top .36rem
      margin-bottom .36rem
      .item-price-now{
        font-size .28rem
        color rgb(240,20,20)
        font-weight 700
        line-height .48rem
        vertical-align middle
      }
      .item-price-old{
        font-size .2rem
        font-weight 700
        color rgb(147,153,159)
        line-height .48rem
        vertical-align middle
        text-decoration line-through
        margin-left .16rem
      }
      .addToShopCar{
        width 1.48rem
        height .48rem
        color #ffffff
        background rgb(0,160,220)
        border-radius .24rem
        font-size .2rem
        line-height .48rem
        text-align center
        float right
      }
      .ball{
        width .3rem
        height .3rem
        background red
        position absolute
        border-radius 50%
        right .92rem
        bottom .82rem
      }
    }
  }
  .color-wall{
    width 100%
    height .32rem
    background-color #f3f5f7
    border-top: 1px solid rgba(7,17,27,.1)
    border-bottom: 1px solid rgba(7,17,27,.1)
  }
  .food-introduce{
    padding .36rem
    .food-introduce-title{
      font-size .28rem
      color rgb(7,17,27)
    }
    .food-introduce-content{
      padding .12rem .16rem .36rem .16rem
      font-size .24rem
      font-weight 200
      color rgb(77,85,93)
      line-height .48rem
    }
  }
  .food-comment{
    padding .36rem .36rem 0 .36rem
    border-bottom 1px solid rgba(7,17,27,.1)
    .food-comment-title{
      font-size .28rem
      color rgb(7,17,27)
    }
    .btn-wrapper{
      padding .36rem 0
      border-bottom 1px solid rgba(7,17,27,.1)
      overflow hidden
      .btn-item{
        width 1.2rem
        height 0.64rem
        line-height .64rem
        text-align center
        float left
        margin-right .16rem
        border-radius .02rem
        font-size .24rem
        color #000
        .click-count{
          font-size .16rem
        }
      }
      .on{
        color #fff
      }
      .all{
        background rgb(0,160,220)
      }
      .recommend{
        background rgba(0,160,220,.2)
      }
      .taunt{
        background rgba(77,85,93,.2)
      }
    }
    .select-comment-wrapper{
      width 100%
      height 1rem
      .comment-select-icon{
        font-size .48rem
        display inline-block
        vertical-align middle
        color rgb(147,153,159)
      }
      .icon-check_circle:before{
        content: '\e902'
      }
      .select-comment{
        display inline
        font-size .24rem
        color rgb(147,153,159)
        line-height 1rem
      }
      .on{
        color green
      }
    }
  }
  .comment-wrapper{
    padding 0 .36rem
    .comment-item{
      padding .32rem 0
      border-bottom 1px solid rgba(7,17,27,.1)
      .comment-haed{
        display flex
        justify-content space-between
        .comment-time{
          color rgb(147,153,159)
          font-size .2rem
          vertical-align .02rem
        }
        .comment-user{
          color rgb(147,153,159)
          font-size .2rem
          .user-avatar{
            width .24rem
            height .24rem
            display inline-block
            overflow hidden
            border-radius 50%
            vertical-align -.02rem
            img{
              width .24rem
              height .24rem
            }
          }
        }
      }
      .comment-content-wrapper{
        margin-top .12rem
        .icon-thumb_up{
          font-size .24rem
          color rgb(0,160,220)
        }
        .icon-thumb_down{
          font-size .24rem
          color rgb(183,187,191)
        }
        .icon-thumb_up:before{
          content: '\e909'
        }
        .icon-thumb_down:before{
          content: '\e908'
        }
        .comment-content{
          font-size .24rem
          color rgb(7,17,27)
          display inline
        }
      }
    }
  }
}
</style>
